<script setup>
import {
  getIconGroupAxios,
  queryPlotFileAxios,
  getPlotFileDataAxios,
} from "@/data";
import SvgIcon from "@comp/SvgIcon.vue";
import ScrollBox from "@comp/ScrollBox.vue";
import CardMap from "@comp/CardMap.vue";
import PlotIcon from "@comp/PlotIcon.vue";
import CopyPlotDialog from "@comp/CopyPlotDialog.vue";
import Preview from "@comp/preview.vue";
import PrintSetting from "@comp/PrintSetting.vue";
import html2canvas from "html2canvas";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { nextTick } from "vue";

const route = useRoute();
const router = useRouter();

const iconColorList = Object.freeze({
  红: "#FF0000",
  蓝: "#0000FF",
  绿: "#00FF00",
  粉: "#FF60AF",
});

const optIconList = Object.freeze([
  { iconName: "新建", method: "backDrawList" },
  { iconName: "导入", method: "loadPlotData" },
  { iconName: "保存", method: "savePlotData" },
  { iconName: "另存为", method: "saveAsPlotData" },
  { iconName: "打印", method: "printPlotData" },
]);

const positionLayoutList = Object.freeze({
  左下: "lb-box",
  右下: "rb-box",
  左上: "lt-box",
  右上: "rt-box",
});

const iconGroupJSON = ref({}); // 图标分组原始数据
const iconGroupList = ref([]); // 可用图标分组
const currentIconGroup = ref(""); // 当前图标分组
const currentIconList = ref([]); // 当前图标列表
const currentDrawIcon = ref({}); // 当前绘制军标信息
const historyIcons = ref([]); // 历史图标
const drawing = ref({
  地图信息: {
    军标信息: { data: [] },
    行政区划信息: [],
    自定义边界坐标: [],
  },
  文字: {
    显示: false,
    边框: false,
    标题位置: "",
    内容: "",
    文字大小: 36,
    字体: "",
    位置: "",
  },
  图例: {
    显示: "",
    位置: "",
    内容: [],
  },
  直角坐标系: false,
  边框: false,
  比例尺: {},
  指南针: {
    显示: false,
    位置: "右上",
  },
  历史图标: [],
});

const showConfigPanel = ref(false);
const plotColor = ref("");
const direction = ref("rtl");
const multiFlag = ref(false);
const plotEditFlag = ref(true);
const showCopy = ref(false);
const isShowPpoup = ref(false);
const itemSeach = ref("");
const dataURL = ref("");
const legendImage = ref("");
const compassImage = ref("");
const plotMap = ref();

const outlink = computed(() => route.query.mode !== "outlink");
const plotID = computed(() => route.query.fileID || "");
const legendsShow = computed(() =>
  drawing.value.图例.内容.filter(function (item) {
    return item.isShow;
  })
);

const showBorder = computed(
  () =>
    drawing.value.文字.显示 && drawing.value.文字.边框 && showConfigPane.valuel
);
const titlePosition = computed(() => drawing.value.文字.标题位置);
const showOutTitle = computed(
  () =>
    drawing.value.文字.标题位置 === "外标题" &&
    showConfigPane.valuel &&
    drawing.value.文字.显示
);

const changeSeachGroup = () => {
  iconGroupList.value.filter((item) => item.includes(val));
};

// 窗体通信-接收保存
const parentClick = (e) => {
  if (e.data.data === "save") {
    saveAndClose();
  }
};

// 窗体通信-关闭
const sonClick = () => {
  const data = {
    from: "plotsys",
    code: 200,
    data: "close",
  };
  window.parent.postMessage(data, "*");
};

// 窗体通信-关闭保存
const saveAndClose = () => {
  savePlot("plotMap");
  setTimeout(() => {
    sonClick();
  }, 2000);
};

/**
 *  des: 地图标绘信息发生变化（添加或者删除）
 *  1. 重新获取当前的地图数据信息并赋值到drawing里面
 *  2. 将图例进行更新
 */
const plotUpdate = (data) => {
  const newPlotData = plotMap.value.getSaveData();
  //   this.$set(drawing.value.地图信息.军标信息, data, newPlotData.data)
  updateLegendList(newPlotData.data);
};

// 地图图例去重
const updateLegendList = (newPlotData) => {
  // 唯一性索引
  const mapdata = new Map();
  // 拷贝标绘数据
  const copyPlotData = JSON.parse(JSON.stringify(newPlotData));
  // 实际的数据 - 图例的数据 - 原始数据
  const iconJson = [];
  const groupList = Object.keys(iconGroupJSON.value);
  groupList.forEach((item) => {
    if (item !== "show") {
      iconJson.push(...iconGroupJSON.value[item]);
    }
  });
  if (copyPlotData.length > 0) {
    iconJson.forEach((standardIcon) => {
      copyPlotData.forEach((plotIcon) => {
        const index =
          plotIcon.id.split("").length -
          plotIcon.id.split("").findLastIndex((i) => i === "_");
        const idName = plotIcon.id.substr(0, index);
        const realName = plotIcon.name;
        if (standardIcon.key === idName || standardIcon.key === realName) {
          mapdata.set(standardIcon.key, plotIcon);
        }
      });
    });
  }
  if (drawing.value.图例.内容.length > 0) {
    const newArr = [...mapdata.values()];
    drawing.value.图例.内容.forEach((item, index) => {
      const isExist = newArr.some((oldval) => oldval.id === item.id);
      if (!isExist) {
        drawing.value.图例.内容.splice(index, 1);
      }
    });
    newArr.forEach((ele) => {
      const isExist = drawing.value.图例.内容.some(
        (oldval) => oldval.id === ele.id
      );
      if (!isExist) drawing.value.图例.内容.push(ele);
    });
  } else {
    drawing.value.图例.内容 = [...mapdata.values()];
  }
};

// 获取制图数据
const getPlotData = () => {
  const baseInfo = JSON.parse(
    JSON.stringify(queryPlotFileAxios)
      .replace(/None/g, null)
      .replace(/True/g, true)
      .replace(/False/g, false)
  );
  formatDrawingInfo(baseInfo);
  const plotData = getPlotFileDataAxios;
  const newPlotData = plotData.map((item) => {
    item.content = item.content.replace(/None/g, '""');
    item.content = item.content.replace(/'/g, '"');
    item.content = item.content.replace(/\\/g, "/");
    item.content = item.content.replace(/\r/g, "\\r");
    item.content = item.content.replace(/\n/g, "\\n");
    item.content = item.content.replace(/\s/g, "");
    item.content = JSON.parse(item.content);
    return item.content;
  });
  drawing.value.地图信息.军标信息.data = newPlotData;
};

// 开启绘制图层
const openDrawLayer = (mapRef = null) => {
  plotMap.value.startPlotting(true);
};
// 开启协同标绘
const changeMultiStatus = (val) => {
  plotMap.value.syncPlotSwitch(val);
};
// 开启军标编辑面板
const changePlotEditStatus = (val) => {
  plotMap.value.showPlotPanel(val);
};
// 加载地图最佳视角
const loadBestView = (mapRef = null, mapBaseInfo = {}) => {
  if (mapBaseInfo.地图信息.自定义边界坐标.length > 0) {
    mapRef.showBBox(mapBaseInfo.地图信息.自定义边界坐标);
    mapRef.boxZoom(mapBaseInfo.地图信息.自定义边界坐标);
  } else {
    const len = mapBaseInfo.地图信息.行政区划信息.length;
    if (len > 0) {
      const region = mapBaseInfo.地图信息.行政区划信息[len - 1];
      mapRef.setView(region);
      
      mapRef.boxZoom();
    }
  }
};
// 保存制图
const savePlot = (mapRef, flag) => {
  mapRef.value.savePlotData2DB();
  mapRef.value.savePlotFile2DB(drawing.value);
  ElMessage.success("保存成功");
};

// 操作按钮点击事件
const optBtnClick = (method) => {
  if (method) {
    [method]();
  }
};

// 操作按钮-新建制图
const backDrawList = () => {
  router.push("/home");
};

// 操作按钮-加载制图
const loadPlotData = () => {
  ElMessage.success("载入成功");
  plotData.value.loadPlotData(true);
};

// 操作按钮-保存制图
const savePlotData = () => {
  savePlot("plotMap");
};

// 操作按钮-另存为制图
const saveAsPlotData = () => {
  showCopy.value = true;
};

// 操作按钮-打印制图
const printPlotData = () => {
  beforePrint();
  setTimeout(() => {
    html2canvas(document.getElementById("mapview"), {
      backgroundColor: null,
      useCORS: true,
    }).then((canvans) => {
      dataURL = canvans.toDataURL("image/png");
      isShowPpoup.value = true;
    });

    html2canvas(document.getElementById("legend-display"), {
      backgroundColor: null,
      useCORS: true,
    }).then((res) => {
      legendImage.value = res.toDataURL("image/png");
    });
    html2canvas(document.getElementById("compass-display"), {
      backgroundColor: null,
      useCORS: true,
    }).then((res) => {
      compassImage.value = res.toDataURL("image/png");
    });
  }, 1000);
};

// 预览
const beforePrint = () => {
  plotEditFlag.value = false;
  showConfigPanel.value = true;
  plotMap.value.showPlotPanel(false);
  plotUpdate();
  resizeMap();
};

// 图标组-获取图标库
const getIconGroup = () => {
  const data = getIconGroupAxios.ICON_GROUP.replace(/'/g, '"');
  iconGroupJSON.value = JSON.parse(data);
  iconGroupList.value = iconGroupJSON.value.show; // 获取分组列表
  changeGroup(iconGroupList.value[0]); // 切换图标组
};

// 图标组-切换图标组
const changeGroup = (item) => {
  currentIconGroup.value = item;
  currentIconList.value = iconGroupJSON.value[item];
};

// 选中绘制图标
const clickPlotIcon = (item, flag = true) => {
  // 待处理历史图标
  plotMap.value.selectPlot(item.key);
  if (flag) {
    insertIconHistory(item);
  }
};

// 插入历史图标
const insertIconHistory = (plotIcon = null) => {
  if (!plotIcon) {
    return false;
  }
  if (drawing.value.历史图标.length === 0)
    drawing.value.历史图标.push(plotIcon);
  else {
    drawing.value.历史图标.forEach((sort, index) => {
      if (plotIcon.label === sort.label) {
        drawing.value.历史图标.splice(index, 1);
      }
      if (drawing.value.历史图标.length > 12) drawing.value.历史图标.pop();
    });
    drawing.value.历史图标.unshift(plotIcon);
  }
};

/**
 *
 * @param {*} plotInfo
 *  - @param {} boundary 边界
 *  - @param {} compass 指南针
 *  - @param {} custom_boundary  自定义边界
 *  - @param {} has_rsc  直角坐标系
 *  - @param {} scale 比例尺
 *  - @param {} legend 图例
 *  - @param {} region 行政区划
 *  - @param {} plot_text 文字
 *  - @param {} RCS 参考坐标系
 *  - @param {} stroke_width 线宽
 *  - @param {} unit 标绘基本单位
 */
const formatDrawingInfo = (plotInfo) => {
  if (plotInfo.boundary) {
  }
  // 指南针
  if (plotInfo.compass) {
    plotInfo.compass = plotInfo.compass.replace(/'/g, '"');
    const newCompass = JSON.parse(plotInfo.compass);
    const show = newCompass && newCompass.显示 ? newCompass.显示 : false;
    const position = newCompass && newCompass.位置 ? newCompass.位置 : "";
    // this.$set(drawing.value, '指南针', { 显示: show, 位置: position })
  }

  // 自定义坐标边界
  if (plotInfo.custom_boundary) {
    plotInfo.custom_boundary = plotInfo.custom_boundary.replace(/'/g, '"');
    const newCustomBoundary = JSON.parse(plotInfo.custom_boundary);
    const { 自定义边界坐标, ...rest } = drawing.value.地图信息;
    // this.$set(drawing.value, '地图信息', { 自定义边界坐标: newCustomBoundary, ...rest })
  }

  // 直角坐标系
  const flag =
    plotInfo.has_rsc &&
    plotInfo.has_rsc !== "0" &&
    plotInfo.has_rsc !== "False";
  //   this.$set(drawing.value, '直角坐标系', flag)

  // 图例
  if (plotInfo.legend) {
    plotInfo.legend = plotInfo.legend
      .replace(/'/g, '"')
      .replace(/None/g, null)
      .replace(/True/g, true)
      .replace(/False/g, false);
    const newLegend = JSON.parse(plotInfo.legend);
    newLegend.显示 = newLegend.显示 === "" ? false : newLegend.显示;
    // this.$set(drawing.value, '图例', newLegend)
  }

  // 文字
  if (plotInfo.plot_text) {
    plotInfo.plot_text = plotInfo.plot_text.replace(/'/g, '"');
    const newPlotText = JSON.parse(plotInfo.plot_text);
    drawing.value.文字 = newPlotText;
  }

  // 比例尺
  if (plotInfo.scale) {
    plotInfo.scale = plotInfo.scale.replace(/'/g, '"');
    const newScale = JSON.parse(plotInfo.scale);
    // this.$set(drawing.value, '比例尺', newScale)
  }

  // 行政区划信息
  if (plotInfo.region) {
    plotInfo.region = plotInfo.region.replace(/'/g, '"');
    const newRegion = JSON.parse(plotInfo.region);
    drawing.value.地图信息.行政区划信息 = newRegion;
  }

  // RCS
  drawing.value.地图信息.军标信息.RCS = plotInfo.rcs || "";

  // stroke_width
  if (plotInfo.stroke_width) {
    drawing.value.地图信息.军标信息.strokeWidth = plotInfo.stroke_width || 2;
  }

  // unit
  if (plotInfo.unit) {
    plotInfo.unit = plotInfo.unit.replace(/'/g, '"');
    const newUnit = JSON.parse(plotInfo.unit) || [];
    
    drawing.value.地图信息.军标信息.unit = newUnit || [500, 500];
  }
};

// 打开抽屉
const openDrawer = () => {
  showConfigPanel.value = !showConfigPanel.value;
  plotEditFlag.value = false;
  changePlotEditStatus(false);
  plotUpdate();
  resizeMap();
};

// resize地图
const resizeMap = () => {
  nextTick(() => {
    plotMap.value.mapRefresh();
  });
};

// 直角坐标系
const showGrid = (st) => {
  plotMap.value.toggleCoord(st);
};

// 指南针
const changeCompass = (item) => {
  drawing.value.指南针.位置 = item;
};

// 图例编辑-图例显示
const changeLegend = (item) => {
  drawing.value.图例.位置 = item;
};

// 模版编辑
const changeTemplate = (flag) => {
  drawing.value.文字.边框 = flag;
  nextTick(() => {
    plotMap.value.mapRefresh();
  });
};

// 军标编辑-改变军标颜色
const changeColor = (col) => {
  plotMap.value.selColor = col;
  plotMap.value.onColorChange();
};

// 军标标记-改变军标大小
const changeSize = (size) => {
  plotMap.value.plotScale(size);
};

onMounted(() => {
  getIconGroup();
  getPlotData();
  nextTick(() => {
    plotMap.value.setPlotFileID(plotID.value)
    openDrawLayer('plotMap')
    drawing.value.地图信息.军标信息.fileID = plotID.value
    plotMap.value.setLoadData(drawing.value.地图信息.军标信息)
    loadBestView(plotMap.value, drawing.value)
  })
  window.addEventListener('message', parentClick)

});

onBeforeUnmount(() => {
  window.removeEventListener('message', parentClick)
})
</script>

<template>
  <div id="draw-page" class="draw-page">
    <el-container class="out-container">
      <el-aside>
        <!-- 操作按钮 -->
        <div class="operate-box">
          <div
            v-for="item in optIconList"
            :key="item.iconName"
            :title="item.iconName"
          >
            <svg-icon
              v-if="outlink"
              :icon="item.iconName"
              :title="item.iconName"
              className="opt-icon"
              @click="optBtnClick(item.method)"
            ></svg-icon>
          </div>
        </div>
        <!-- 侧栏 -->
        <div class="group-box">
          <div class="search-box">
            <el-input
              v-model="itemSeach"
              class="group-search"
              placeholder="搜索关键字"
              prefix-icon="el-icon-search"
              @input="changeSeachGroup"
            >
            </el-input>
          </div>
          <!-- 分组列表 -->
          <div class="group-list">
            <scroll-box>
              <ul>
                <li
                  v-for="item in iconGroupList"
                  :key="item"
                  :class="[{ active: currentIconGroup === item }, 'group-item']"
                  @click="changeGroup(item)"
                >
                  {{ item }}
                </li>
              </ul>
            </scroll-box>
          </div>
        </div>
        <!-- 图标列表  -->
        <div class="icon-box">
          <scroll-box>
            <div class="sort">
              <el-tooltip
                v-for="(item, index) in currentIconList"
                :key="index"
                :content="item.label"
                placement="top-start"
                class="item"
                effect="dark"
              >
                <button @click="clickPlotIcon(item, true)">
                  <plot-icon :icon="item" isLegend="0"></plot-icon>
                </button>
              </el-tooltip>
            </div>
          </scroll-box>
        </div>
      </el-aside>
      <el-container class="main-container">
        <el-header class="main-header">
          <div class="header-left">
            <!-- 历史图标 -->
            <ul>
              <li
                v-for="item in drawing.历史图标"
                :key="item.label"
                @click="clickPlotIcon(item, false)"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.label"
                  placement="top-start"
                >
                  <plot-icon :icon="item" isLegend="0"></plot-icon>
                </el-tooltip>
              </li>
            </ul>
          </div>
          <div class="start-synergy">
            <p style="margin-bottom: 10px" v-if="outlink">
              <span style="margin-right: 10px">协同标绘</span>
              <el-switch
                size="small"
                v-model="multiFlag"
                @change="changeMultiStatus"
              >
              </el-switch>
            </p>
            <p>
              <span style="margin-right: 10px">军标编辑</span>
              <el-switch
                size="small"
                v-model="plotEditFlag"
                @change="changePlotEditStatus"
              >
              </el-switch>
            </p>
          </div>
          <div class="header-right" @click="openDrawer">
            <span class="iconfont icon-hanbaocaidan" tabindex="-1"></span>
          </div>
        </el-header>
        <el-main
          id="mapview"
          :class="[
            'main-content',
            { 'outter-title': showOutTitle },
            { flod: showConfigPanel },
          ]"
        >
          <div
            :style="`font-size:46px`"
            class="map-title"
            v-show="drawing.文字.显示 && showConfigPanel"
          >
            {{ drawing.文字.内容 }}
          </div>
          <div :class="['map-box', { 'show-border': showBorder }]">
            <div :class="['map-inner', { 'inner-border': showBorder }]">
              <!-- 指南针显示 -->
              <div
                id="compass-display"
                :class="[
                  'compass-display',
                  positionLayoutList[drawing.指南针.位置] + '-show',
                ]"
                v-show="showConfigPanel && drawing.指南针.显示"
              >
                <img src="@/assets/imgs/icon_cp_compass.svg" />
              </div>

              <!-- 图例显示 -->
              <div
                id="legend-display"
                :class="[
                  'legend-display',
                  positionLayoutList[drawing.图例.位置] + '-show',
                ]"
                v-show="showConfigPanel && drawing.图例.显示"
              >
                <p>图例</p>
                <div class="lengend_list">
                  <div
                    class="lgd_page"
                    v-for="item in legendsShow"
                    :key="item.id"
                  >
                    <plot-icon :icon="item" isLegend="1"></plot-icon>
                    <p style="marginleft: 34px">
                      {{ item.filename }}
                    </p>
                  </div>
                </div>
              </div>
              <card-map
                ref="plotMap"
                id="plotMap"
                mapId="plotMap"
                @plotupdata="plotUpdate"
              ></card-map>
            </div>
          </div>

          <!-- 配置面板 -->
          <div class="drawer-box-container" v-show="showConfigPanel">
            <scroll-box>
              <div class="drawer-box">
                <!-- 直角坐标系 -->
                <div class="config-item-box coordinate-box">
                  <div class="sub-box">
                    <div class="drawer-name">直角坐标系</div>
                    <div class="switch">
                      <el-switch
                        v-model="drawing.直角坐标系"
                        @change="showGrid"
                      >
                      </el-switch>
                      <div class="switch-text">
                        {{ drawing.直角坐标系 ? "开启" : "隐藏" }}
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 图例  -->
                <div class="config-item-box legend-box">
                  <div class="sub-box">
                    <div class="drawer-name">图例设置</div>
                    <div class="switch">
                      <el-switch v-model="drawing.图例.显示"></el-switch>
                      <div class="switch-text">
                        {{ drawing.图例.显示 ? "开启" : "隐藏" }}
                      </div>
                    </div>
                  </div>
                  <div class="sub-box">
                    <div
                      class="legend-position"
                      v-for="(item, key) in positionLayoutList"
                      :key="item.label"
                    >
                      <div class="legend-image" @click="changeLegend(key)">
                        <div
                          :class="[
                            'triangle',
                            {
                              'active-select': drawing.图例.位置 === key,
                            },
                            item,
                          ]"
                        ></div>
                      </div>
                      <div class="legend-text">
                        {{ key }}
                      </div>
                    </div>
                  </div>
                  <div class="sub-box">
                    <ul class="legend-list">
                      <li
                        class="legend-item"
                        v-for="item in drawing.图例.内容"
                        :key="item.id"
                      >
                        <el-checkbox v-model="item.isShow"></el-checkbox>
                        <plot-icon :icon="item" isLegend="1"></plot-icon>
                        <div class="legend-content">
                          <el-input
                            size="small"
                            v-model="item.filename"
                          ></el-input>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                <!-- 指北针 -->
                <div class="config-item-box">
                  <div class="sub-box">
                    <div class="drawer-name">指北针</div>
                    <div class="switch">
                      <el-switch v-model="drawing.指南针.显示"></el-switch>
                      <div class="switch-text">
                        {{ drawing.指南针.显示 ? "开启" : "隐藏" }}
                      </div>
                    </div>
                  </div>
                  <div class="sub-box">
                    <div
                      class="legend-position"
                      v-for="(item, key) in positionLayoutList"
                      :key="item.label"
                    >
                      <div
                        class="legend-image"
                        @click.capture.self="changeCompass(key)"
                      >
                        <div
                          :class="[
                            'triangle',
                            {
                              'active-select': drawing.指南针.位置 === key,
                            },
                            item,
                          ]"
                        ></div>
                      </div>
                      <div class="legend-text">
                        {{ key }}
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 选择模版 -->
                <div class="config-item-box template-box">
                  <div class="sub-box">
                    <div class="drawer-name">选择模板</div>
                    <div class="switch">
                      <el-switch
                        v-model="drawing.文字.显示"
                        @change="resizeMap"
                      ></el-switch>
                      <div class="switch-text">
                        {{ drawing.文字.显示 ? "开启" : "隐藏" }}
                      </div>
                    </div>
                  </div>
                  <div class="sub-box">
                    <div
                      tabindex="-1"
                      :class="[
                        'template-select',
                        {
                          active: drawing.文字.边框 === false,
                        },
                      ]"
                      @click="changeTemplate(false)"
                    ></div>
                    <div
                      tabindex="-1"
                      :class="[
                        'template-select',
                        {
                          active: drawing.文字.边框 === true,
                        },
                      ]"
                      @click="changeTemplate(true)"
                    >
                      <div
                        style="border: 1px solid #c7c7c7; height: 44px"
                      ></div>
                    </div>
                  </div>
                  <div class="sub-box">
                    <div class="drawer-name">标题样式</div>
                    <div class="title-inside">
                      <el-radio
                        @change="resizeMap"
                        v-model="drawing.文字.标题位置"
                        label="内标题"
                      ></el-radio>
                    </div>
                    <div class="title-outer">
                      <el-radio
                        @change="resizeMap"
                        v-model="drawing.文字.标题位置"
                        label="外标题"
                      ></el-radio>
                    </div>
                  </div>
                  <div class="sub-box">
                    <span class="sub-title">内容</span>
                    <el-input
                      v-model="drawing.文字.内容"
                      placeholder="填写标题文字"
                      size="small"
                    ></el-input>
                  </div>
                </div>

                <!-- 军标编辑 -->
                <div class="config-item-box scale-box">
                  <div class="sub-box">
                    <div class="drawer-name">军标颜色</div>
                  </div>
                  <div class="sub-box" style="flex-direction: column">
                    <el-radio-group v-model="plotColor" @change="changeColor">
                      <el-radio
                        style="margin-right: 10px"
                        v-for="(item, key) in iconColorList"
                        :key="key"
                        :label="item"
                        >{{ key }}</el-radio
                      >
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </scroll-box>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!-- 复制制图对话框 -->
    <copy-plot-dialog :plotID="plotID" :visible="showCopy"></copy-plot-dialog>
    <!-- 打印预览对话框 -->
    <print-setting
      v-if="isShowPpoup"
      v-model="isShowPpoup"
      :dataURL="dataURL"
      :isShowPpoup="isShowPpoup"
      :tlPos="drawing.图例.位置"
      :tuli="legendImage"
      :compass="compassImage"
      :compassPos="drawing.指南针.位置"
      :doubleBorder="drawing.文字.边框"
      titleColor="#000"
      :ioTitle="drawing.文字.标题位置"
      :titleCont="drawing.文字.内容"
      @hidePopup="isShowPpoup = false"
    ></print-setting>
  </div>
</template>

<style scoped lang="scss">
.draw-page {
  height: 100%;
  width: 100%;

  .el-container.out-container {
    height: 100%;

    .el-aside {
      height: 100%;
      width: 300px;
      overflow: hidden;

      .operate-box {
        height: 90px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        > div {
          &:nth-child(4) {
            .opt-icon {
              height: 23px;
              width: 23px;
            }
          }
        }

        .opt-icon {
          width: 32px;
          height: 32px;
          fill: #c7c7c7;
          cursor: pointer;
          margin-right: 20px;

          &:hover {
            fill: #007aff;
          }

          &:nth-child(4) {
            height: 23px;
            width: 23px;
          }
        }
      }

      .group-box {
        height: 320px;
        background-color: #f2f2f2;
        margin-bottom: 10px;
        padding: 20px 0px;
        box-sizing: border-box;

        .search-box {
          width: 100%;
          display: flex;
          justify-content: center;

          .group-search.el-input {
            height: 40px;
            width: 240px;
            line-height: 40px;
            background-color: #fff;
            outline: none;
            border-radius: 24px;
            padding-left: 10px;
            margin: 0 auto;

            ::v-deep {
              .el-input__prefix {
                left: 10px;
                font-size: 20px;
              }

              .el-input__inner {
                width: 80%;
                border: 0;
                outline: none;
              }
            }
          }
        }

        .group-list {
          height: calc(100% - 40px);
          margin-top: 10px;
          width: 100%;

          ul {
            padding: 0px 10px;

            .group-item {
              box-sizing: border-box;
              width: 100%;
              height: 32px;
              line-height: 32px;
              cursor: pointer;
              font-family: PingFangSC-Medium;
              font-size: 14px;
              border-radius: 10px;
              margin-bottom: 10px;
              padding-left: 14px;

              &.active {
                color: #fff;
                background-color: #007aff;
                outline: none;
              }
            }
          }
        }
      }

      .icon-box {
        height: calc(100% - 420px);
        box-sizing: border-box;
        background-color: #f2f2f2;

        .sort {
          width: 100%;
          padding: 10px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          box-sizing: border-box;

          button {
            width: 50px;
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
            cursor: pointer;
            border-radius: 7px;
            border-style: none;
            margin-right: 20px;
            margin-top: 20px;
            margin-bottom: 10px;
          }

          button:focus {
            background: #007aff;
          }

          button div {
            width: 20px;
            height: 20px;
            background-size: contain;
          }
        }
      }
    }
  }

  .el-container.main-container {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .el-header.main-header {
      height: 90px !important;
      background-color: #f2f2f2;
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 0;

      .header-left {
        float: left;
        margin-top: 28px;
        padding: 0px 50px;
        border-right: 1px solid #ccc;

        ul {
          display: flex;

          li {
            width: 50px;
            height: 34px;
            border-radius: 4px;
            margin-right: 23px;
            background: #fff;
            outline: none;
            display: flex;
            justify-content: center;
            align-items: center;

            &:focus {
              background: #007aff;
            }
          }
        }
      }

      .start-synergy {
        position: absolute;
        top: 0px;
        right: 130px;
        margin-top: 28px;
        padding: 5px 50px;
        height: 34px;
        font-size: 14px;
        border-right: 1px solid #ccc;
      }

      .header-right {
        position: absolute;
        right: 0;
        width: 115px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        font-size: 34px;
        cursor: pointer;

        .iconfont {
          outline: none;
          font-size: 40px;
          color: #c7c7c7;

          &:hover {
            color: #007aff;
          }
        }
      }
    }

    .el-main {
      padding: 0 0;
      height: calc(100vh - 90px);
      width: 100%;
      overflow: hidden;
      position: relative;

      &.outter-title {
        padding-top: 60px;

        .map-title {
          top: 0px;
        }
      }

      &.flod {
        width: calc(100% - 240px);
      }

      .map-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 25px;
        font-size: 24px;
        letter-spacing: 2px;
        z-index: 1000;
        line-height: 60px;
      }

      .map-box {
        height: 100%;
        width: 100%;
        overflow: hidden;

        .map-inner {
          height: 100%;
          width: 100%;
        }

        .compass-display {
          position: absolute;
          z-index: 100;
        }

        .legend-display {
          min-width: 297px;
          min-height: 151px;
          box-sizing: border-box;
          background: #fff;
          position: absolute;
          border: 1px solid #202020;
          z-index: 100;
          padding: 27px 22px;

          > p {
            width: 22px;
            font-family: PingFangSC-Regular;
            font-size: 22px;
            color: #000;
            letter-spacing: 0;
            text-align: center;
            float: left;
            line-height: 45px;
            margin-right: 40px;
          }

          .lengend_list {
            display: flex;
            width: calc(100% - 62px);
            height: 100%;
            float: right;
            flex-direction: column;

            .lgd_page {
              flex: 1;
              display: flex;
              align-items: center;
              margin-bottom: 5px;
            }
          }
        }
      }

      .drawer-name {
        font-size: 14px;
      }

      .drawer-box-container {
        position: fixed;
        top: 90px;
        right: 0;
        width: 240px;
        height: calc(100% - 90px);
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc;
        z-index: 1000;

        .drawer-box {
          padding: 0px 15px;
        }

        .config-item-box {
          padding: 10px 0px;
          border-bottom: 1px solid #ccc;
          clear: both;

          &:first-of-type {
            border-top: 1px solid #ccc;
          }

          .sub-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            clear: both;
            margin-bottom: 15px;

            &:last-of-type() {
              margin-bottom: 0px;
            }
          }

          .legend-position {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .legend-image {
              position: relative;
              width: 50px;
              height: 22px;
              border-radius: 4px;
              background-color: #fff;
              padding-right: 10px;
              overflow: hidden;
              margin-bottom: 5px;
              box-sizing: border-box;
              cursor: pointer;

              .triangle {
                position: absolute;
                width: 14px;
                height: 14px;
                background: #c7c7c7;
                transform: rotate(45deg);
                border: 0;

                &.active-select {
                  background: #007aff;
                }
              }
            }

            .legend-text {
              font-size: 14px;
              width: 50px;
              text-align: center;
            }
          }
        }

        .coordinate-box {
          .corrdinate-name {
            font-size: 12px;
            width: 50px;
          }

          .input {
            flex: 1;
            padding: 0 5px;
          }

          .unit {
            width: 45px;
          }
        }

        .legend-box {
          width: 100%;

          .legend-list {
            width: 100%;

            .legend-item {
              width: 100%;
              height: 34px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 5px;

              .legend-bg {
                width: 20px;
                height: 20px;
                background-color: #fff;
                background-size: contain;
                margin-right: 15px;
              }

              .legend-content {
                width: 134px;
                height: 24px;
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 6px;
              }
            }
          }
        }

        .scale-box {
          .el-radio {
            margin-right: 20px;

            &:last-child {
              margin-right: 0;
            }
          }

          .el-button {
            width: 90px;
            height: 30px;
            margin-top: 10px;
            margin-right: 10px;
          }
        }

        .title-box {
          li {
            &:last-child {
              margin-bottom: 15px;
            }

            &:nth-child(2) {
              padding: 15px 0;
            }
          }

          border-bottom: 1px solid #ccc;

          .el-radio {
            margin-right: 10px;
          }

          .legend-checked {
            margin-right: 10px;
          }

          .title-inside {
            display: flex;
            align-items: center;
          }

          .title-outer {
            display: flex;
            align-items: center;
          }
        }

        .template-box {
          .sub-title {
            width: 60px;
            font-size: 14px;
          }

          .template-select {
            width: 80px;
            height: 46px;
            background-color: #fff;
            border: 3px solid #c7c7c7;
            outline: none;
            padding: 4px;
            cursor: pointer;

            &.active {
              border: 3px solid #0079ff;
            }
          }
        }

        .legend-checkbox {
          width: 14px;
          height: 14px;
          border: 1px solid #ccc;
          background-color: #fff;
          border-radius: 2px;
          margin-right: 25px;
          margin-left: 1px;
        }

        .legend-checked {
          width: 14px;
          height: 14px;
          border: 1px solid #ccc;
          background-color: #fff;
          border-radius: 2px;
          margin-right: 25px;
          margin-left: 1px;
          background-color: #007aff;
          font-size: 12px;
          font-weight: 700;
          color: #fff;
        }

        .switch {
          display: flex;

          .switch-text {
            padding-left: 10px;
            font-size: 14px;
          }
        }

        .template {
          height: 130px;
          border-bottom: 1px solid #ccc;

          .rectangle1 {
            width: 92px;
            height: 46px;
            background-color: #fff;
            margin-top: 40px;
            border: 3px solid #c7c7c7;
            outline: none;
            padding: 4px;
          }
        }
      }
    }
  }

  .lb-box {
    bottom: -6px;
    left: -6px;
  }

  .rb-box {
    bottom: -6px;
    right: -6px;
  }

  .lt-box {
    top: -6px;
    left: -6px;
  }

  .rt-box {
    top: -6px;
    right: -6px;
  }

  .lb-box-show {
    bottom: 0px;
    left: 0px;
  }

  .rb-box-show {
    bottom: 0px;
    right: 0px;
  }

  .lt-box-show {
    top: 0px;
    left: 0px;
  }

  .rt-box-show {
    top: 0px;
    right: 0px;
  }

  .show-border {
    height: 100%;
    width: 100%;
    border: 7px solid #221815;
    padding: 3px;
    box-sizing: border-box;

    .inner-border {
      height: 100%;
      width: 100%;
      position: relative;
      border: 2px solid #221815;
      box-sizing: border-box;
    }
  }
}
</style>